<template>
    <div class="index underline">
        <Header></Header>
        <div class="main">
            <p class="current-nav">
                当前位置 :
                <router-link to="index">首页</router-link>
                <i>></i>
                <a>应急预案评审与发布</a>
                <i>></i>线下评审
            </p>
            <div class="mianOut">
                <div class="note">
                    <p>
                        <img
                            src="../../../static/images/sound.png"
                        />提示信息：您的应急预案已经编制完成了，正式发布前还需要组织应急预案评审。
                    </p>
                </div>
                <div class="mianInner1">
                    <ul class="asList clearfix">
                        <li>
                            <router-link
                                :to="{
                                    path: 'onlineAssess2',
                                    query: { navIndex: 4 }
                                }"
                                >线上评审</router-link
                            >
                        </li>
                        <li>
                            <router-link
                                class="active"
                                :to="{
                                    path: 'underlineAssess2',
                                    query: { navIndex: 4 }
                                }"
                                >线下评审</router-link
                            >
                        </li>
                    </ul>
                    <p class="process">
                        <i class="el-icon-warning"></i
                        ><a download href="../../../static/评审会议流程.docx"
                            >评审会议流程</a
                        >
                    </p>
                    <div class="downBox clearfix">
                        <h4 class="table_tit">应急预案评审材料</h4>
                        <a class="download" @click="downloadTemp('all')"
                            ><i class="el-icon-download"></i>下载模板</a
                        >
                    </div>
                    <el-table
                        ref="multipleTable"
                        v-loading="loadingFlag"
                        :data="data1"
                        row-key="fileId"
                        @selection-change="handleSelectionChange"
                    >
                        <el-table-column
                            type="index"
                            align="center"
                            label="序号"
                            width="100"
                        >
                        </el-table-column>
                        <el-table-column
                            label=""
                            :reserve-selection="true"
                            type="selection"
                            align="center"
                            width="100"
                        >
                        </el-table-column>
                        <el-table-column label="评审材料模板" align="center">
                            <template slot-scope="scope">
                                <a
                                    class="temName"
                                    @click="downloadTemp(scope.row.templateId)"
                                    >{{ scope.row.name }}</a
                                >
                            </template>
                        </el-table-column>
                        <el-table-column label="评审材料" align="center">
                            <template slot-scope="scope">
                                <div class="upload" v-if="!scope.row.fileId">
                                    <el-upload
                                        action="/emergency/v1.0/upload/file"
                                        ref="reportUpload"
                                        :data="{
                                            templateId: scope.row.templateId
                                        }"
                                        :on-change="changeimg3"
                                        :http-request="newload"
                                        :show-file-list="false"
                                        accept=".xls,.xlsx,.doc,.docx"
                                    >
                                        <el-button class="detail-btn">
                                            <i class="el-icon-upload2">上传</i>
                                        </el-button>
                                    </el-upload>
                                </div>
                                <div class="deleteBox" v-else>
                                    <a
                                        class="matName"
                                        @click="downFile(scope.row.reviewId)"
                                        >{{ scope.row.fileName }}</a
                                    >
                                    <a
                                        class="deleteBtn"
                                        @click="deleteFile(scope.row.reviewId)"
                                        >删除</a
                                    >
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>

                <div class="mianInner2">
                    <div class="asTitle">
                        <h3>应急预案汇编修改</h3>
                    </div>
                    <p>
                        <i class="el-icon-warning"></i
                        >如果您需要根据评审意见修改应急预案，请点击应急预案汇编进行修改
                    </p>
                </div>
              <div class="infoMain1">
                <div class="asTitle">
                  <h3>应急预案发布</h3>
                </div>
                <p >
                  <i class="el-icon-warning"></i>点击发布信息填写，填写签发人和签发日期，系统自动为您生成发布文件。
                </p>
                <p>
                  <el-button
                    class="cancel"  style="background: #2476ff;color: #fff;border: none;margin: 30px auto" @click="releaseFlag=true"
                  >发布信息填写</el-button
                  >
                </p>
                <el-table :data="publishList" v-if="publishList.length>0">
                  <el-table-column
                    align="center"
                    label="序号"
                    width="50"
                  >
                    <template slot-scope="scope">{{
                      1 + scope.$index
                      }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="signTemplateName"
                    label="文件名"
                    align="center"
                  ></el-table-column>

                  <el-table-column
                    label="操作"
                    align="center"
                    width="340"
                  >
                    <template slot-scope="scope">
                      <div>
                        <el-button
                          @click="look(scope.row.id)"
                          class="detail-btn"
                        ><i class="el-icon-search"></i>查看
                        </el-button>
                        <el-button
                          @click="download(scope.row.id)"
                          class="detail-btn"
                        ><i class="el-icon-download"></i>下载
                        </el-button>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          <el-dialog
            title="发布信息"
            :visible.sync="releaseFlag"
            width="45%"
            :append-to-body="true"
          >
            <div>
              <div class="timeSelect" style="margin-bottom: 20px">
                <span style="width: 120px;display: inline-block">签发人:</span>
                <el-input
                  v-model="releaseUser"
                  style="width: 80%;"
                ></el-input>
              </div>
              <div class="timeSelect">
                <span style="width: 120px;display: inline-block">签发日期:</span>
                <el-date-picker
                  v-model="releaseTime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="date"
                  style="width: 80%"
                  format="yyyy-MM-dd hh:mm:ss"
                  placeholder="选择日期">
                </el-date-picker>
              </div>
              <div style="overflow:hidden;margin-top:80px;">
                <a
                  class="send"
                  @click="releaseFlag = false"
                  style="margin:0;border: 1px solid #5ea0ff;color: #4080ff;width:80px;"
                >取 消</a
                >
                <a class="save" @click="publish">发布</a>
              </div>
            </div>
          </el-dialog>
        </div>
        <Footer />
    </div>
</template>

<script>
import Header from '../common/header'
import Footer from '../common/footer'
import config from "../../config.js"
export default {
    components: {
        Header,
        Footer
    },
    data () {
        return {
            loadingFlag: false,
            downIds: [],
            templateId: '',
            formInline: {
                companyEmergencyName: "",
                companyId: "",
                planCategory: ""
            },
            data1: [],
            currentPage: 1,
            total: 10,
            tableType: '',
          releaseFlag:false,
          releaseTime:'',
          releaseUser:'',
          publishList:[]
        };
    },
    created () {
        this.getList()
      this.getPubishList()
    },
    methods: {
        changeimg3 () {

        },
        getList () {   //企业线下评审模板列表查询
            this.$axios
                .post(config.baseUrl + 'filetemplate/v2.0/offline/review/template', {
                    companyId: JSON.parse(localStorage.user).companyId,
                    tableType: '5'
                }).then(res => {
                    if (res.data.meta.success) {
                        this.data1 = res.data.data
                    } else {
                        this.data1 = []
                        this.$message.warning(res.data.meta.message)
                    }
                })
                .catch(response => {
                    console.log(response);
                });
        },
        newload (file) {  //企业上传评审材料
            this.loadingFlag = true
            let url = config.baseUrl + "filetemplate/v1.0/uploadfile/uploadreviewdocuments?companyId=" + JSON.parse(localStorage.user).companyId + '&templateId=' + file.data.templateId;
            var fd = new FormData()
            fd.append('file', file.file)
            let config1 = {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            }
            this.$axios.post(url, fd, config1).then(res => {
                this.loadingFlag = false
                if (res.data.meta.success) {
                    this.getList();
                    this.$message.success('上传成功')
                } else {
                    this.$message({
                        message: res.data.meta.message,
                        type: 'error'
                    });
                }

            })
        },
        deleteFile (id) {
            this.$axios
                .post(config.baseUrl + 'filetemplate/v1.0/downloadfile/delete?id=' + id)
                .then(res => {
                    if (res.data.meta.success) {
                        this.getList();
                        this.$message.success('删除成功')
                    } else {
                        this.$message.warning(res.data.meta.message)
                    }
                })
                .catch(response => {
                    console.log(response);
                });
        },
        downFile (id) {
            this.$axios
                .post(config.baseUrl + 'filetemplate/v1.0/downloadfile/querybyid?id=' + id)
                .then(res => {
                    if (res.data.meta.success) {
                        const iframe = document.createElement("iframe");
                        iframe.style.display = "none"; // 防止影响页面
                        iframe.style.height = 0; // 防止影响页面
                        iframe.src = res.data.data;
                        document.body.appendChild(iframe); // 这一行必须，iframe挂在到dom树上才会发请求
                        // 5分钟之后删除（onload方法对于下载链接不起作用，就先抠脚一下吧）
                        setTimeout(() => {
                            iframe.remove();
                        }, 5 * 60 * 1000);
                        this.toggleSelection()

                    } else {
                        this.$message.warning(res.data.meta.message)
                    }
                })
                .catch(response => {
                    console.log(response);
                });
        },
        handleSelectionChange (data) {
            this.downIds = data
        },
        toggleSelection (rows) {
            if (rows) {
                rows.forEach(row => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },
        downloadTemp (id) {
            let ids = ''
            if (id != 'all') {
                ids = id
            } else {
                if (this.downIds.length > 0) {
                    this.downIds.map(item => {
                        ids += item.templateId + ','
                    })
                    console.log(ids)
                } else {
                    this.$message.warning('请选择评审材料模板')
                    return false
                }
            }
            this.$axios
                .post(config.baseUrl + 'filetemplate/v1.0/downloadfile/templatefile?templateIds=' + ids)
                .then(res => {
                    if (res.data.meta.success) {
                        if (res.data.data.length > 0) {
                            res.data.data.map(item => {
                                const iframe = document.createElement("iframe");
                                iframe.style.display = "none"; // 防止影响页面
                                iframe.style.height = 0; // 防止影响页面
                                iframe.src = item;
                                document.body.appendChild(iframe); // 这一行必须，iframe挂在到dom树上才会发请求
                                // 5分钟之后删除（onload方法对于下载链接不起作用，就先抠脚一下吧）
                                setTimeout(() => {
                                    iframe.remove();
                                }, 5 * 60 * 1000);
                            })
                        }
                        this.toggleSelection()

                    } else {
                        // this.$message.warning(res.data.meta.message)
                    }
                })
                .catch(response => {
                    console.log(response);
                });
        },
      publish() {
        if(!this.releaseTime){
          this.$message.warning("签发日期不能为空")
          return
        }
        if(!this.releaseUser){
          this.$message.warning("签发人不能为空")
          return
        }
        let params = {
          "companyId": JSON.parse(localStorage.getItem('user')).companyId,
          "signTime": this.releaseTime,
          "signUser": this.releaseUser,
          "userName": JSON.parse(localStorage.getItem('user')).userName

        }
        this.$axios
        ({
          method: 'post',
          url: this.$baseUrl + "/emergency/v1.0/plan/publish/save",
          data: params
        }).then(
          (res) => {
            if (res.data.meta.success) {
              this.releaseFlag=false
              this.$message({
                message: "保存成功",
                type: 'success'
              });
              this.getPubishList()
            } else {
              this.$message({
                message: res.data.meta.message,
                type: 'error'
              });
            }
            this.releaseFlag=false
          })
      },
      getPubishList () {
        this.$axios({
          method: "get",
          url: this.$baseUrl + "/emergency/v1.0/plan/publish/list/" + JSON.parse(localStorage.getItem("user")).companyId
        })
          .then(res => {
            if (res.data.meta.success) {
              this.publishList=res.data.data
            } else {
              this.$message.warning(res.data.meta.message)
            }
          })
          .catch(response => {
            console.log(response);
          });
      },
      look (id) {
        //查看
        this.$axios({
          method: "get",
          url: this.$baseUrl + "/emergency/v1.0/plan/publish/info/"+id,
        }).then(res => {
          if (res.data.meta.success) {
            if(res.data.data.signTemplateFile){
              this.lookmsg(res.data.data)
            }else{
              this.$message.warning("数据不存在")
            }
          }
        });
      },
      lookmsg(item) {
        let url = item.signTemplateFile;
        var tempwindow = window.open('_blank');//打开一个窗口，然后用
        tempwindow.location = url;//使这个窗口跳转到百度，这样就会呈现弹出百度窗口的效果了。
      },
      download (id) {
        this.$axios({
          method: "get",
          url: this.$baseUrl + "/emergency/v1.0/plan/publish/export/"+id,
        }).then(res => {
          if (res.data.meta.success) {
            if(res.data.data){
              window.location.href= res.data.data;
            }else{
              this.$message.warning("数据不存在")
            }
          }
        });
      },
    },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less'>
.underline {
  .infoMain1 {
    background: #fff;
    padding-bottom: 30px;

    p {
      line-height: 36px;
      font-weight: bold;
      font-size: 14px;
      color: #666;
      text-align: center;
      margin-top: 30px;

      i {
        font-size: 20px;
        color: #69ed79;
        margin-right: 10px;
        position: relative;
        top: 3px;
      }
    }
    .timeSelect {
      text-align: center;
      .el-date-editor .el-range-separator {
        width: 6%;
      }
    }
    .el-button:hover {
      opacity: 0.8;
    }
    .downBox {
      margin: 40px 0 20px;
      .download {
        display: block;
        float: right;
        margin-right: 100px;
        width: 79px;
        height: 36px;
        text-align: center;
        line-height: 36px;
        color: #4080ff;
        border-radius: 8px;
        background: #eefdf4;
        cursor: pointer;
        i {
          font-size: 18px;
          position: relative;
          top: 2px;
        }
      }
      .download:hover {
        opacity: 0.8;
      }
    }
    /*表格*/
    .el-table {
      width: calc(100% - 200px);
      margin: 0 auto;
      border-top: 1px solid #ebeef5;
      .fileName {
        text-decoration: underline;
        color: #4080ff;
        cursor: pointer;
        margin: 0 5px;
      }
      .fileName:hover {
        opacity: 0.8;
      }
    }

    .el-table th > .cell {
      color: #333333;
      font-weight: bold;
    }
  }
    .mianOut {
        width: calc(100% - 60px);
        margin: 0 auto;
        background: #fff;
        .note {
            padding: 20px 0;
            height: 82px;
            line-height: 42px;
            p {
                color: #666;
                padding-left: 42px;
                img {
                    width: 26px;
                    height: 26px;
                    margin-right: 5px;
                }
            }
        }
        .asTitle {
            h3 {
                font-weight: bold;
                font-size: 16px;
                color: #666;
                padding: 20px 0 0 20px;
            }
        }
        .mianInner1 {
            background: #fff;
            padding-bottom: 30px;

            .asList {
                width: 300px;
                height: 49px;
                margin: 20px auto;
                border: 1px solid #4080ff;
                border-radius: 8px;
                li {
                    float: left;
                    width: 50%;
                    a {
                        display: block;
                        color: #666;
                        height: 47px;
                        text-align: center;
                        line-height: 47px;
                    }
                    a.active {
                        color: #fff;
                        background: #4080ff;
                    }
                    a.active:hover {
                        color: #fff;
                    }
                    a:hover {
                        color: #4080ff;
                    }
                }
                li:first-child {
                    a {
                        border-radius: 8px 0 0 8px;
                    }
                }
                li:last-child {
                    a {
                        border-radius: 0 8px 8px 0;
                    }
                }
            }

            .process {
                text-align: center;
                i {
                    font-size: 20px;
                    color: #69ed79;
                    margin-right: 10px;
                    position: relative;
                    top: 3px;
                }
                a {
                    text-decoration: underline;
                    color: #666;
                }
                a:hover {
                    color: #4080ff;
                }
            }

            .el-button:hover {
                opacity: 0.8;
            }
            .downBox {
                margin: 40px 0 20px;
                .table_tit {
                    font-weight: bold;
                    font-size: 16px;
                    color: #666;
                    float: left;
                    margin-left: 100px;
                    line-height: 36px;
                }
                .download {
                    display: block;
                    float: right;
                    margin-right: 100px;
                    width: 105px;
                    height: 36px;
                    text-align: center;
                    line-height: 36px;
                    color: #4080ff;
                    border-radius: 8px;
                    background: #f8f7ff;
                    cursor: pointer;
                    i {
                        font-size: 18px;
                        position: relative;
                        top: 2px;
                    }
                }
                .download:hover {
                    opacity: 0.8;
                }
            }
            /*表格*/
            .el-table {
                width: calc(100% - 200px);
                margin: 0 auto;
                border-top: 1px solid #ebeef5;
                a {
                    cursor: pointer;
                }
                a:hover {
                    color: #4080ff;
                }
                .fileName {
                    text-decoration: underline;
                    color: #4080ff;
                    cursor: pointer;
                }
                .fileName:hover {
                    opacity: 0.8;
                }
                .el-button {
                    border-radius: 8px;
                    border-color: #eef4fd;
                    background: #eef4fd;
                    height: 36px;
                    padding: 0;
                    width: 85px;
                    color: #4080ff;
                }

                .el-button:hover {
                    background: #fff;
                    border-color: #4080ff;
                }
                .temName,
                .matName {
                    text-decoration: underline;
                    color: #333;
                }
                .deleteBtn {
                    color: #4080ff;
                    margin-left: 10px;
                }
                .deleteBtn:hover {
                    opacity: 0.8;
                }
            }

            .el-table th > .cell {
                color: #333333;
                font-weight: bold;
            }
        }
        .mianInner2 {
            background: #fff;
            padding-bottom: 80px;
            margin-top: 30px;

            p {
                line-height: 36px;
                font-weight: bold;
                font-size: 14px;
                color: #666;
                text-align: center;
                margin-top: 60px;

                i {
                    font-size: 20px;
                    color: #69ed79;
                    margin-right: 10px;
                    position: relative;
                    top: 3px;
                }

                a {
                    display: inline-block;
                    margin-left: 25px;
                    width: 150px;
                    height: 36px;
                    color: #fff;
                    border-radius: 8px;
                    line-height: 36px;
                    text-align: center;
                    cursor: pointer;
                    font-weight: normal;
                    background: #4080ff;
                    /*background: linear-gradient(left, #6fb2ff 0%, #095fff 100%);*/
                }

                a:hover {
                    opacity: 0.8;
                }
            }
        }
    }
}
.current-nav {
    width: 100%;
    height: 40px;
    line-height: 40px;
    padding-left: 30px;
    color: #939393;
    font-size: 14px;
    background: #f3f3f3;
}
.current-nav a {
    color: #939393;
    font-size: 14px;
}
.save {
  display: block;
  float: right;
  margin-right: 15px;
  width: 79px;
  height: 36px;
  font-size: 14px;
  text-align: center;
  line-height: 36px;
  color: #fff;
  border-radius: 8px;
  background: #4080ff;
  /*background: linear-gradient(left, #6fb2ff 0%, #095fff 100%);*/
  cursor: pointer;
}

.send {
  font-size: 14px;
  display: block;
  float: right;
  margin-right: 100px;
  width: 120px;
  height: 36px;
  text-align: center;
  cursor: pointer;
  line-height: 36px;
  border-radius: 8px;
  color: #fff;
}

</style>
